<template>
  <uni-popup ref="popupRef" type="bottom">
    <view class="filter-modal">
      <view class="modal-header">
        <text class="modal-title">粉丝筛选</text>
        <uni-icons type="close" size="24" color="#666" @click="close" />
      </view>

      <view class="modal-content">
        <!-- 邀请时间 -->
        <view class="filter-section">
          <text class="section-title">邀请时间</text>
          <view class="time-options">
            <view
              v-for="(opt, idx) in inviteTimeOptions"
              :key="idx"
              class="time-option"
              :class="{ active: selectedInviteTime === opt.value }"
              @click="selectInviteTime(opt.value)"
            >
              {{ opt.label }}
            </view>
          </view>
        </view>

        <!-- 自定义时间区间 -->
        <view class="date-range-section">
          <view class="date-input" @click="openDatePicker('start')">
            <text :class="{ placeholder: !range.start }">{{
              range.start || "起始时间"
            }}</text>
          </view>
          <text class="date-separator">—</text>
          <view class="date-input" @click="openDatePicker('end')">
            <text :class="{ placeholder: !range.end }">{{
              range.end || "终止时间"
            }}</text>
          </view>
        </view>

        <!-- 会员昵称 -->
        <view class="filter-section">
          <text class="section-title">会员昵称</text>
          <uni-easyinput
            v-model="memberName"
            placeholder="请输入会员昵称"
            prefixIcon="search"
            :clearable="true"
          />
        </view>
      </view>

      <!-- 底部操作 -->
      <view class="modal-footer">
        <view class="footer-btn reset-btn" @click="onReset">重置</view>
        <view class="footer-btn confirm-btn" @click="onConfirm">确认</view>
      </view>
    </view>
  </uni-popup>

  <!-- 起始时间选择器 -->
  <DatePicker
    ref="startDatePickerRef"
    v-model="range.start"
    title="起始时间"
    :maxDate="range.end"
    @confirm="handleStartDateConfirm"
  />

  <!-- 终止时间选择器 -->
  <DatePicker
    ref="endDatePickerRef"
    v-model="range.end"
    title="终止时间"
    :minDate="range.start"
    @confirm="handleEndDateConfirm"
  />
</template>

<script setup>
import { ref } from "vue";
import DatePicker from "./DatePicker.vue";

// 选项
const inviteTimeOptions = [
  { label: "近1个月", value: 1 },
  { label: "近3个月", value: 3 },
  { label: "近6个月", value: 6 },
];

const popupRef = ref(null);
const startDatePickerRef = ref(null);
const endDatePickerRef = ref(null);

// 内部状态
const selectedInviteTime = ref(1);
const range = ref({ start: "", end: "" });
const memberName = ref("");
const currentDateType = ref(""); // 'start' 或 'end'

// 暴露 open/close
const open = (initial = {}) => {
  // 初始化
  selectedInviteTime.value = initial.inviteTime ?? 1;
  range.value = { start: initial.start || "", end: initial.end || "" };
  memberName.value = initial.memberName || "";
  popupRef.value?.open();
};
const close = () => popupRef.value?.close();

defineExpose({ open, close });

const selectInviteTime = (val) => {
  selectedInviteTime.value = val;
  if (val !== "range") {
    // 非自定义时清空区间
    range.value = { start: "", end: "" };
  }
};

// 打开日期选择器
const openDatePicker = (type) => {
  currentDateType.value = type;
  if (type === "start") {
    startDatePickerRef.value?.open();
  } else {
    endDatePickerRef.value?.open();
  }
};

// 处理起始时间确认
const handleStartDateConfirm = (date) => {
  range.value.start = date;
  // 如果选择了起始时间，自动切换为自定义模式
  selectedInviteTime.value = "custom";
};

// 处理终止时间确认
const handleEndDateConfirm = (date) => {
  range.value.end = date;
  // 如果选择了终止时间，自动切换为自定义模式
  selectedInviteTime.value = "custom";
};

const onReset = () => {
  selectedInviteTime.value = 1;
  range.value = { start: "", end: "" };
  memberName.value = "";
};

const emit = defineEmits(["confirm"]);
const onConfirm = () => {
  // 如果选择了自定义时间段，验证时间是否完整
  if (selectedInviteTime.value === "custom") {
    if (!range.value.start || !range.value.end) {
      uni.showToast({
        title: "请选择完整的时间段",
        icon: "none",
      });
      return;
    }
  }

  emit("confirm", {
    inviteTime: selectedInviteTime.value,
    start: range.value.start,
    end: range.value.end,
    memberName: memberName.value,
  });
  close();
};
</script>

<style lang="scss" scoped>
.filter-modal {
  background: #fff;
  border-radius: 16rpx 16rpx 0 0;
  max-height: 85vh;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.modal-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
}

.modal-content {
  padding: 32rpx;
}

.filter-section {
  margin-bottom: 24rpx;
}

.section-title {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 16rpx;
}

.time-options {
  display: flex;
  gap: 16rpx;
}

.time-option {
  flex: 1;
  padding: 16rpx 0;
  background-color: #f5f5f5;
  border-radius: 30rpx;
  text-align: center;
  font-size: 28rpx;
  color: #666;

  &.active {
    background-color: #faa820;
    color: #fff;
  }
}

.date-range-section {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.date-input {
  flex: 1;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333;

  text {
    &.placeholder {
      color: #999;
    }
  }
}

.date-separator {
  font-size: 28rpx;
  color: #999;
}

.modal-footer {
  display: flex;
  gap: 24rpx;
  padding: 24rpx 32rpx;
  border-top: 1rpx solid #f5f5f5;
}

.footer-btn {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  font-size: 32rpx;
  border-radius: 12rpx;
}

.reset-btn {
  background-color: #f5f5f5;
  color: #666;
}

.confirm-btn {
  background: #faa820;
  color: #fff;
  font-weight: 600;
}
</style>
